<!--
 * @Author: 卡卡 1071780426@qq.com
 * @Date: 2022-11-04 09:39:50
 * @LastEditors: 卡卡 1071780426@qq.com
 * @LastEditTime: 2023-10-12 11:41:09
 * @FilePath: \backstage - 副本\src\components\el-table.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div class="app-container">
    <el-table
      :span-method="objectSpanMethod"
      :data="dataList"
      default-expand-all
      v-loading="loading"
      element-loading-background="rgba(0, 0, 0, 0.2)"
      border
      fit
      :highlight-current-row="currentRow"
      style="width: 100%"
      :height="height"
      :tree-props="{ children: 'children', hasChildren: 'hasChildren' }"
      :row-key="rowKey"
      @selection-change="handleSelectionChange"
      :stripe="stripe"
      @sort-change="handleSortChange"
      :cell-class-name="classCell"
      @row-click="rowChange"
      :row-class-name="tableRowClassName"
    >
      <!-- :span-method="mouseEnter" -->
      <!-- 是否有多选 -->
      <el-table-column
        type="selection"
        width="55"
        v-if="table_config.isCheckBox"
      ></el-table-column>
      <!-- 是否需要序号 -->
      <el-table-column
        type="index"
        :index="hIndex"
        label="序号"
        width="55"
        align="center"
        v-if="table_config.isIndex"
      />

      <el-table-column
        v-for="item in table_config.thead"
        :key="item.prop"
        :prop="item.prop"
        :label="item.label"
        :min-width="item.minWidth"
        :sortable="item.sortable ? true : false"
        :align="item.align"
      >
        <template slot-scope="scope">
          <!-- 有状态过滤 -->
          <span
            v-if="item.filter && !item.btn"
            :class="item.specialClass && item.specialClass(scope.row)"
          >
            {{ item.callback && item.callback(scope.row) }}
          </span>
          <el-button
            size="mini"
            v-else-if="item.filter && item.btn"
            :type="item.specialClass && item.specialClass(scope.row)"
            :class="item.specialClass && item.specialClass(scope.row)"
            >{{ item.callback && item.callback(scope.row) }}</el-button
          >
          <el-input
            v-else-if="item.edit"
            v-model="scope.row[item.prop]"
            :type="item.type"
            placeholder="请输入"
            @input="
              input(
                scope.row,
                dataList,
                item.type,
                item.prop,
                scope.row[item.prop]
              )
            "
            :disabled="item.disabled"
            min="0"
          ></el-input>
          <!-- <div v-else-if="item.option"></div> -->
          <div v-else-if="item.radio">
            <el-radio
              @input="
                input(
                  scope.row,
                  dataList,
                  item.type,
                  item.prop,
                  scope.row[item.prop]
                )
              "
              v-model="scope.row[item.prop]"
              label="1"
              >是</el-radio
            >
            <el-radio
              @input="
                input(
                  scope.row,
                  dataList,
                  item.type,
                  item.prop,
                  scope.row[item.prop]
                )
              "
              v-model="scope.row[item.prop]"
              label="0"
              >否</el-radio
            >
          </div>

          <el-select
            class="selectOptions"
            @change="
              input(
                scope.row,
                dataList,
                item.type,
                item.prop,
                scope.row[item.prop]
              )
            "
            v-else-if="item.option"
            v-model="scope.row[item.prop]"
            placeholder="请选择"
          >
            <el-option
              v-for="i in item.options"
              :key="i.value"
              :label="i.label"
              :value="i.value"
            >
            </el-option>
          </el-select>
          <!-- 图片展示 -->
          <div
            v-else-if="item.image"
            style="
              display: flex;
              height: 100%;
              align-items: center;
              flex-shrink: 0;
            "
          >
            <div
              v-for="(v, index) in scope.row[item.prop]"
              v-viewer
              :key="index"
              style="
                margin: 2px 3px;
                display: flex;
                flex-shrink: 0;
                align-items: center;
              "
            >
              <img
                style="
                  max-width: 100%;
                  max-height: 100%;
                  width: 18px;
                  height: 20px;
                "
                :src="v[table_config.imgKeyWord]"
              />
            </div>
          </div>
          <!-- 文件 -->
          <div
            v-else-if="item.file"
            style="
              display: flex;
              height: 100%;
              align-items: center;
              flex-shrink: 0;
            "
          >
            <div
              v-for="(v, index) in scope.row[item.prop]"
              @click="openPdfs(v)"
              :key="index"
              style="
                margin: 2px 3px;
                display: flex;
                flex-shrink: 0;
                align-items: center;
              "
            >
              <img
                style="
                  max-width: 100%;
                  max-height: 100%;
                  width: 18px;
                  height: 20px;
                "
                src="@/assets/img/pdf.png"
              />
            </div>
          </div>
          <!-- <img v-else-if="item.image" :src="scope.row[item.prop]" style="width:40px; height: 40px"> -->
          <!-- switch开关 -->
          <el-switch
            v-else-if="item.switch"
            v-model="scope.row[item.prop]"
            active-text="启用"
            active-value="1"
            inactive-value="0"
            inactive-text="停用"
            @change="item.callback && item.callback(scope.row)"
          >
          </el-switch>
          <!-- detail -->
          <el-button
            v-else-if="item.detail"
            @click="openDialog(scope.row)"
            @cell-dblclick="openDialog"
            type="text"
            size="small"
            style="padding: 0 !important; margin: 0"
          >
            {{ scope.row[item.prop] }}
          </el-button>
          <!-- 有跳转 -->
          <router-link
            v-else-if="item.router"
            :to="{
              path: item.routerPath,
              query: { name: scope.row[item.prop] },
            }"
          >
            {{ scope.row[item.prop] }}
          </router-link>
          <!-- 默认展示 -->
          <span v-else>
            <span v-if="level.length > 0">
              <!-- <a href="#" style="width:80px"
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                            :title="dataList[3][item.prop] == null ? '' : '预警标准：' + dataList[3][item.prop]">{{
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                        scope.row[item.prop]
                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                                    }}</a> -->
              <el-tooltip
                :disabled="
                  !dataList[3][item.prop] || scope.row.name != '重量偏差(%)'
                "
                class="item"
                effect="dark"
                placement="top-start"
                popper-class="tooltip-width"
              >
                <div
                  slot="content"
                  v-html="dataList[3][item.prop]"
                  v-if="
                    dataList[3][item.prop] != null &&
                    scope.row.name == '重量偏差(%)'
                  "
                ></div>
                <span class="title">
                  {{ scope.row[item.prop] }}
                </span>
              </el-tooltip>
            </span>
            <span v-else>
              <!-- 卡卡{{ scope.row[item.prop] }} -->
              <!-- <a href="javascript:;" style="color: #000 !important;" :title="scope.row[item.prop]">{{
                                                                                                                                                                                                                                                                scope.row[item.prop] }}</a> -->
              <el-tooltip
                class="item"
                effect="dark"
                popper-class="tooltip-width"
                :disabled="isShowTooltip"
                :open-delay="500"
                :content="scope.row[item.prop] + ''"
                placement="top"
              >
                <div class="linkTo">
                  <!-- @mouseover="onMouseOver(scope.row[item.prop] + item.prop, scope.$index)" -->
                  <span class="title" :ref="scope.row[item.prop] + item.prop">
                    {{ scope.row[item.prop] }}
                  </span>
                </div>
              </el-tooltip>
            </span>
          </span>
        </template>
      </el-table-column>
      <!-- 操作列 -->
      <el-table-column
        fixed="right"
        :label="table_config.operation.label"
        :width="table_config.operation.width"
        align="center"
        v-if="isShow"
      >
        <template slot-scope="scope">
          <template
            v-if="table_config.operation.cols && !table_config.operation.detail"
          >
            <div
              class="btn"
              style="display: flex"
              v-for="item in table_config.operation.cols.slice(0, 2)"
              :key="item.label"
            >
              <el-button
                @click="item.handleRow(scope.row, item.label)"
                :type="item.type"
                size="small"
              >
                {{ item.label }}
              </el-button>
            </div>
          </template>
          <template
            v-if="table_config.operation.cols && table_config.operation.detail"
          >
            <div
              @click="openDialog(scope.row)"
              @cell-dblclick="openDialog"
              style="color: #409eff !important; cursor: pointer"
              v-for="item in table_config.operation.cols.slice(0, 2)"
              :key="item.label"
            >
              {{ item.label }}
            </div>
          </template>
          <template
            v-if="
              table_config.operation.cols &&
              table_config.operation.detail &&
              table_config.operation.prop
            "
          >
            <div
              @click="openDialog(scope.row)"
              @cell-dblclick="openDialog"
              style="cursor: pointer; color: #409eff !important"
              :style="{
                color: table_config.operation.specialClass(
                  scope.row[item.prop]
                ),
              }"
              v-for="item in table_config.operation.cols.slice(0, 2)"
              :key="item.label"
            >
              {{ scope.row[item.prop] }}
            </div>
          </template>
          <!-- 操作列超过3个，用更多下拉显示 -->
          <el-dropdown v-if="isShowOperationCols">
            <span class="el-dropdown-link">
              更多<i class="el-icon-arrow-down el-icon--right"></i>
            </span>
            <el-dropdown-menu slot="dropdown">
              <el-dropdown-item
                v-for="item in table_config.operation.cols.slice(2)"
                :key="item.label"
                @click.native="item.handleRow(scope.row, item.label)"
              >
                {{ item.label }}
              </el-dropdown-item>
            </el-dropdown-menu>
          </el-dropdown>
        </template>
      </el-table-column>
      <template slot="empty" v-if="nodata">
        <img
          style="width: 285px; height: 208px"
          src="@/assets/img/undata.png"
          alt=""
        />
        <div class="pageFlagText">暂时没有数据哦！</div>
      </template>
    </el-table>
    <!-- 附件展示 -->
    <div class="Control-2">
      <el-dialog top="4vh" :title="fFileName" :visible.sync="dialogPdf">
        <div :style="{ height: '800px' }" style="border: 1px solid red">
          <iframe
            :src="pdfUrl"
            width="100%"
            height="100%"
            frameborder="0"
          ></iframe>
        </div>
      </el-dialog>
    </div>
    <pdfDialog
      :dialogVisible="dialogVisibles"
      @closes="closeDialog"
      :fileDetail="fileDetail"
    ></pdfDialog>
  </div>
</template>
<script>
import pdfDialog from "@/components/public/pdf-dialog";

export default {
  props: {
    config: {
      type: Object,
      default: () => {},
    },
    nodata: {
      type: Boolean,
      default: true,
    },
    height: {
      type: String,
      default: "100%",
      // calc(100% - 50px)
    },
    rowKey: {
      type: String,
      default: "fId",
    },
    currentRow: {
      type: Boolean,
      default: true,
    },
    stripe: {
      type: Boolean,
      default: true,
    },

    dataList: {
      type: Array,
      default: () => {
        return [];
      },
    },
    page: {
      type: Number,
      default: 1,
    },
    pageSize: {
      type: Number,
      default: 20,
    },
    loading: {
      type: Boolean,
      default: false,
    },
    statusType: {
      type: String,
      default: "0",
    },
    level: {
      type: Array,
      default: () => {
        return [];
      },
    },
    earlyWarning: {
      type: Array,
      default: () => {
        return [];
      },
    },
  },
  components: {
    pdfDialog,
  },
  data() {
    return {
      table_config: {
        imgKeyWord: "",
        fileKeyWord: "",
        fileName: "",
        classCell: false,
        dialogHeight: "800px",
        thead: [], // 表格头
        isCheckBox: false, // 是否多选
        isIndex: false, // 是否有序号
        isOperation: true, // 是否有操作列表
        operation: {
          // 操作
          cols: [],
        },
      },
      // 附件名称
      fFileName: null,
      // 附件地址
      pdfUrl: null,
      // 附件展示
      dialogPdf: false,
      dialogVisibles: false,
      fileDetail: {},
      earlyWarningText: "",
      flag: 0,
      isShowTooltip: false,
    };
  },
  computed: {
    isShow() {
      return (
        this.table_config.isOperation && this.table_config.operation.cols.length
      );
    },
    isShowOperationCols() {
      let list = this.table_config.operation.cols;
      return list.length && list.length > 2;
    },
    hIndex() {
      // console.log((this.page - 1) * this.pageSize + 1);
      // 当前页数 - 1 * 每页数据条数 + 1
      return (this.page - 1) * this.pageSize + 1;
    },
  },
  watch: {
    // dialogHeight
    // 监听传过来的config，进行初始化
    config: {
      handler(newVal) {
        // console.log(newVal);
        if (newVal) {
          this.initConfig();
        }
      },
      immediate: true,
    },
  },
  mounted() {},
  filters: {},

  methods: {
    onMouseOver(str, index) {
      const tag = this.$refs[str];
      // console.log(tag, index);
      const parentWidth = tag[index].parentNode.offsetWidth;
      const contentWidth = tag[index].offsetWidth;
      this.isShowTooltip = contentWidth <= parentWidth;
    },
    // 关闭二级弹框
    closeDialog() {
      this.dialogVisibles = false;
    },
    // 初始化配置
    initConfig() {
      for (let key in this.config) {
        if (Object.keys(this.table_config).includes(key)) {
          this.table_config[key] = this.config[key];
        }
      }
    },
    // 多选事件
    handleSelectionChange(val) {
      console.log(val);
      this.$emit("selection-change", val);
    },
    // 点击当前行
    rowChange(val) {
      this.$emit("click-change", val);
    },
    classCell({ rowIndex, columnIndex }) {
      if (this.statusType == "1") {
        // if (this.table_config.classCell) {
        //     if (rowIndex == 0 && columnIndex == 0) {
        //         return 'blueClass';
        //     } else if (rowIndex == 1 && columnIndex == 0) {
        //         return 'orangeClass';
        //     } else if (rowIndex == 2 && columnIndex == 0) {
        //         return 'redClass';
        //     }
        // }
      } else if (this.statusType == "2") {
        if (rowIndex == 2 && columnIndex != 0) {
          // this.flag = 0
          // this.earlyWarningText = ''
          if (this.level[columnIndex] == 1) {
            // this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]
            return "blueClass1";
            // return 'blueClass';
          } else if (this.level[columnIndex] == 2) {
            // this.flag = 0
            // this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]

            return "orangeClass1";
          } else if (this.level[columnIndex] == 3) {
            // this.flag = 0
            // this.earlyWarningText = '预警标准：' + this.earlyWarning[columnIndex]

            return "redClass1";
          } else {
            // this.flag = 1

            return "defaltClass1";
          }
        }
        // console.log(45);
      }
    },
    // 当单元格 hover 进入时会触发该事件
    mouseEnter({ rowIndex, columnIndex }) {
      if (rowIndex == 2 && columnIndex != 0) {
        if (this.level[columnIndex] == 1) {
          this.flag = 0;
          this.earlyWarningText = "预警标准：" + this.earlyWarning[columnIndex];
        } else if (this.level[columnIndex] == 2) {
          this.flag = 0;
          this.earlyWarningText = "预警标准：" + this.earlyWarning[columnIndex];
        } else if (this.level[columnIndex] == 3) {
          this.flag = 0;
          this.earlyWarningText = "预警标准：" + this.earlyWarning[columnIndex];
        } else {
          this.flag = 1;
          this.earlyWarningText = "";
        }
      }
    },

    objectSpanMethod({ columnIndex }) {
      // console.log(row, column, rowIndex, columnIndex);
      if (columnIndex === 16) {
        return {
          rowspan: 3,
          colspan: 1,
        };
        // if (rowIndex % 2 === 0) {
        //     return {
        //         rowspan: 2,
        //         colspan: 1
        //     };
        // } else {
        //     return {
        //         rowspan: 0,
        //         colspan: 0
        //     };
        // }
      }
    },
    tableRowClassName() {
      // if (rowIndex === 2) {
      //     return 'warning-row';
      // }
      // return '';
    },
    // 排序事件
    handleSortChange(val) {
      this.$emit("sort-change", val);
    },
    openDialog(row) {
      // console.log(row);
      this.$emit("openDialog", row);
    },
    // 文件预览
    openPdfs(val) {
      this.dialogVisibles = true;
      this.fileDetail = val;
    },
    // input 输入值
    input(row, table, type, lable, uu) {
      console.log(row, table, type, lable, uu);
      // if (type == "number") {
      //   let value = row[lable].replace(/^(0+)|[^\d]+/g, ""); // 只能输入数字
      //   row[lable] = value - 0;
      //   console.log(value);
      // }
      this.$emit("inputValue", row, table);
    },
  },
};
</script>
   
<style scoped>
.btn {
  display: flex;
  justify-content: center;
  display: inline-block;
  margin: 5px 0 0 10px;
}

.bt .btn {
  display: flex;
  justify-content: center;
  display: inline-block;
  margin: 5px 0 0 10px;
}

.btn:first-child {
  margin-left: 0;
}

.color0 {
  color: #22b14c !important;
}

.color1 {
  color: #5353ef;
}

.color2 {
  color: #cdcf0b;
}

.color3 {
  color: #fdb556;
}

.el-dropdown {
  margin-left: 10px;
  cursor: pointer;
}

.app-container {
  height: 100%;
}

.pageFlagText {
  color: #171a1d;
  font-size: 16px;
}

.linkTo {
  width: 100%;
  overflow: hidden;
  white-space: nowrap;
  text-overflow: ellipsis;
}
.app-container /deep/  .el-table th.el-table__cell>.cell {
  padding: 0 1px;
}
</style>